<template>
    <div class="acount-detail">
        <header>
            場外帳戶明細
        </header>
        <div class="border-box f-s">
            <span>幣種：</span>
            <ul class="list f-s">
                <!-- <li :class="formData.coin_id == null ? 'active' : ''" @click='chooseCoin(0)'>全部</li> -->
                <li    
                    v-for='item in $store.state.coin' 
                    :key='item.id' 
                    :class="item.id == formData.coin_id ? 'active' : ''"
                    @click='chooseCoin(item.id)'>{{item.code}}</li>
            </ul>
        </div>
        <div class="border-box f-s">
            <span>類型：</span>
            <ul class="list f-s">
                <!-- <li  :class="formData.record_type == 0 ? 'active' : ''" @click='chooseType(0)'>全部</li> -->
                <li  v-for='item in type' :key='item.id' @click='chooseType(item.id)' :class="item.id == formData.record_type ? 'active' : ''">{{item.label}}</li>
            </ul>
        </div>
        <div class="border-box f-s" style="padding-top:15px;">
            <span>時間：</span>
            <el-date-picker
                style="margin-left : 15px;"
                size='mini'
                v-model="dateRange"
                @change='dateRangeChange'
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="開始日期"
                end-placeholder="結束日期">
            </el-date-picker>
        </div>
        <el-table  
            style='margin-top : 15px;'
            :data='table'
            :header-cell-style="{background : '#E5F2FF'}"
		    ref='table'>
            <el-table-column label='時間' prop='updated_at'></el-table-column>
            <el-table-column label='幣種'  prop='code'></el-table-column>
            <el-table-column label='類型'   prop='record_type'></el-table-column>
            <el-table-column label='數量'  prop='number'></el-table-column>
            <el-table-column label='單價'  prop='price'></el-table-column>
            <el-table-column label='手續費'  prop='miners_fee_number'></el-table-column>
        </el-table>
        <div class="center" style="padding : 15px;" v-if='table && table.length'>
            <el-pagination
                @current-change='pageChange'
                :page-size ='formData.limit'
                :total='total'
                background
                layout="prev, pager, next">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {WalletDetail} from '@/api/user'
    export default {
        data () {
            return {
                value1 : null,
                table : null,
                tatal : 0,
                formData : {
                    coin_id : null,
                    record_type : null,
                    begin : null,
                    end : null,
                    page : 1,
                    limit : 10 
                },
                dateRange : null,
                type : [
                    {
                        id : 1,
                        label : '網絡轉入'
                    },{
                        id : 2,
                        label : '網絡轉出'
                    },{
                        id : 3,
                        label : '交易買入'
                    },{
                        id : 4,
                        label : '交易賣出'
                    },{
                        id : 7,
                        label : '手續費'
                    }
                ]
            }
        },
        methods :{
            getList () {
                WalletDetail(this.formData).then(res => {
                    this.table = res.result.data;
                    this.total = res.result.count;
                })
            },
            chooseCoin (id) {
                this.formData.coin_id = id;
                this.formData.page = 1;
                this.getList()
            },
            chooseType (id) {
                this.formData.record_type = id;
                this.formData.page = 1;
                this.getList()
            },
            dateRangeChange (a,b) {
                // console.log(a,b)
                console.log(this.dateRange)
                this.formData.begin = this.dateRange[0];
                this.formData.end = this.dateRange[1];
                this.formData.page = 1;
                this.getList();
            },
            pageChange (page) {
                this.formData.page = page;
                this.getList()
            }
        }   
    }
</script>

<style lang='less' scoped>
    @import url('../../assets/css/_b.less');    
    .acount-detail {
        width: 1200px;
        margin: 30px auto;
        background: #fff;
        padding: 15px;
        header {
            padding-bottom: 15px;
            text-align: center;
            font-size: 22px;
            font-weight: bold;
        }
        .border-box {
            border-top: 1px solid #f1f1f1;
            // padding: 15px 15px 0 15px;
            .list {
                margin-left: 15px;
                flex-wrap: wrap;
                flex: 1;
                li {
                    padding: 10px 15px;
                    // background: nond;
                    margin-right: 30px;
                    margin-bottom: 15px;
                    margin-top: 15px;
                    cursor: pointer;
                }
                .active {
                    background: @mainColor;
                    color: #fff;
                    border-radius: 4px;
                }
            }
            
        }
    }
</style>